<template>
  <div class="main category-main">
    <div class="m-header">
      <div class="m-title">
        作品：
        <span>{{ bookName }} / 共{{ allCategory.length }}章</span>
      </div>
      <div class="m-tool">
        <el-button
          @click="newCategory"
          plain
        >新建</el-button>
        <el-button
          @click="deleteCategory"
          plain
        >删除</el-button>
        <el-button
          @click="saveCategory"
          plain
        >保存</el-button>

        <!-- <el-button
          @click="publishCategory"
          plain
        >发布</el-button> -->
      </div>
    </div>
    <div class="m-con">
      <div class="category">
        <div class="cat-unit">
          <div class="cat-item cat-name">{{ category.title }}</div>
          <div class="cat-item cat-des">{{ category.createTime | formatDate }}</div>
        </div>
        <div class="list">
          <div
            v-for="(category,index) in allCategory"
            :key="index"
            class="cat-unit"
            @click="checkCategory(category)"
          >
            <div class="cat-item">{{ category.title }}</div>
            <div class="cat-item">{{ category.createTime | formatDate }}</div>
          </div>
        </div>
      </div>
      <div class="content">
        <el-form
          ref="form"
          :rules="rules"
          :model="category"
          class="c-form"
        >
          <el-form-item>
            <el-input
              class="c-name"
              placeholder="请输入章节名称"
              v-model="category.title"
            ></el-input>
            <div class="tip">
              标题
              <span class="red">{{ category.title.length }}</span>
              /20,正文{{ category.content.length }}
            </div>
          </el-form-item>
          <el-form-item>
            <el-input
              class="c-name"
              placeholder="请输入章节次序"
              v-model="category.seq"
              :disabled="!canEditSeq"
            ></el-input>
            <el-button @click="changeSeqStatus" type="text">编辑次序</el-button>
          </el-form-item>
          <el-form-item>
            <el-input
              class="c-textarea"
              type="textarea"
              :rows="24"
              placeholder="请输入内容"
              v-model="category.content"
            ></el-input>
          </el-form-item>
          <div class="header"></div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getAllCategory, saveCategory, updateCategory, deleteCategory } from "@/api/category.js"

export default {
  name: 'Category',
  
  filters: {
    formatDate(value) {
      if (value) {
        return (new Date(value)).toLocaleString()
      }
    }
  },
  data() {
    return {
      operateType: 'new',
      category: {
        seq:'', // 章节次序
        title: '',
        content: '', // 字数
      },
      allCategory: [],
      rules: {
        title: [{ required: true, message: '请输入章节标题' }],
        content: [{ required: true, message: '请输入章节内容' }],
        seq: [{ required: true, message: '请输入章节次序' }]
      },
      canEditSeq:false,
      bookId:'',
      bookName:''
    }
  },
  async mounted() {
    this.bookId = this.$route.query.bookId
    this.bookName = this.$route.query.bookName
    if(!this.bookId || !this.bookName){
      this.$message.error('书籍id和书籍名字不存在')
      this.$router.back()
    }
    await this.getAllCategory()
    this.$set(this.category,'seq',this.allCategory.length+1)
  },
  methods: {
    async getAllCategory() {
      // 调用api方法
      let res = await getAllCategory(this.bookId)
      if (res.code === 0) {
        this.allCategory = res.data
        
      } else {
        this.$message('获取全部章节失败')
      }
    },
    changeSeqStatus(){
      this.canEditSeq = !this.canEditSeq
    },
    // 选择标题
    checkCategory(category) {
      this.category = category
      this.canEditSeq = false
    },
    async deleteCategory() {
      // 删除章节
      let res = await deleteCategory({ id: this.category.id })
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.recover()
      } else {
        this.$message({
          type: 'error',
          message: '删除失败'
        })
      }
    },
    async recover() {
      this.category = {
        title: '',
        content: '',
        seq:''
      }
      this.allCategory = []
      await this.getAllCategory()
      this.canEditSeq = false
      this.$set(this.category,'seq',this.allCategory.length + 1)
    },
    async saveCategory() {
      console.log('this.category:',this.category);

      if (this.category.title && this.category.content) {
        this.category.title = this.category.title.trim()
        // this.category.content = this.category.title.trim()
        // 判断章节是否存在
        await this.getAllCategory()
        if (this.category.id) {
          // 更新
          delete this.category.createTime
          let res = await updateCategory(this.category)
          this.recover()
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '更新成功'
            })

          } else {
            this.$message({
              type: 'error',
              message: '更新失败'
            })
          }
        } else {
          // 新建
          let hasTitle = this.allCategory.some(item => {
            return item.title === this.category.title
          })
          if (hasTitle) {
            this.$message({
              message: '章节已存在',
              type: 'error'
            })
            return
          }
          let data = Object.assign({},this.category,{ bid:this.bookId, seq: this.allCategory.length + 1})
          saveCategory(data).then(res => {
            if (res.code === 0) {
              this.$message({
                showClose: true,
                message: '添加章节成功',
                type: 'success'
              })
              this.recover()
            } else {
              this.$message({
                showClose: true,
                message: '添加章节失败',
                type: 'error'
              })
            }
          })
        }
      } else {
        this.$message({
          message: '标题和章节不能为空',
          type: 'error'
        })
      }
    },
    newCategory() {
      // 新建章节
      this.recover()
    },
    publishCategory() {
      // 现阶段保存和发布是逻辑一样
      // 发布章节 
      console.log('publishCategory')

    }
  }
}
</script>
<style lang="scss">
.category-main {
  .m-header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    border-bottom: 1px solid #e4e4e4;
    align-items: center;
    padding: $contentPadding;
    .m-title {
      span {
        color: red;
      }
    }
    .m-tool {
    }
  }
  .m-con {
    display: flex;
    height: calc(100% - 60px);
    .category {
      width: 200px;
      
      height: 100%;
      .cat-unit {
        height: 70px;
        border-bottom: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        font-size: 12px;
        padding: 10px;
        line-height: 25px;
        cursor: pointer;
        .cat-name {
          color: red;
        }
        .cat-des {
          color: #979797;
        }
      }
      .list{
        height:100%;
        // border-right: 1px solid #e4e4e4;
        overflow-y: scroll;
      }
    }
    .content {
      padding: 1em 2em;
      width: calc(100% - 200px);
      box-sizing: border-box;
      .el-form {
        width: 100%;
        .el-form-item {
          width: 100%;
          position: relative;
          .el-form-item__content {
            width: 100%;
          }
          .c-name {
            border: none;
            border-bottom: 1px solid #e5e5e5;
            .el-input__inner {
              border: none;
            }
          }
          .tip {
            position: absolute;
            right: 0px;
            top: 0px;
          }
          .c-textarea {
          }
        }
      }
    }
  }
}
</style>
